
import React from 'react';
import classnames from 'classnames';
import ajax from 'common/utils/ajax';
import close from 'common/asset/img/award/close.png';
import submitSrc from 'common/asset/img/game/submit.png';
import goodsInputBg from 'common/asset/img/award/goodsInputBg.png';
import css from './index.less';

export default class RealGoods extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      phone: '',
      address: '',
      hasSubmit: false,
    };
  }

  update(key, e) {
    this.setState({
      [key]: e.target.value,
    });
  }

  async submit() {
    const { name, phone, address, hasSubmit } = this.state;

    if (!hasSubmit) {

      if (name.length && phone.length && address.length) {
        this.setState({
          hasSubmit: true
        });

        console.log('-----', {
          token: localStorage.getItem('sxPlantGameUserToken'),
          id: this.props.lottery.id,
          name,
          phone,
          address
        });
        let data = await ajax.req(
          'lottery.getWinnerDetail',
          {
            token: localStorage.getItem('sxPlantGameUserToken'),
            id: this.props.lottery.id,
            name,
            phone,
            address
          }, 'post');

        if (data.result) {
          this.props.onClose(true);
        }
      } else {
        alert('请输入您的姓名，电话和地址！');
      }


    } else {
      alert('您的信息已提交，请稍等！');
    }

  }

  render() {
    return (
      <div className={css.mask}>
        <div className={css.goodsBox}>
          <img src={close} className={css.close} onClick={() => { this.props.onClose(); }} alt=""/>
          <img src={this.props.award.notice} className={css.bg} alt=""/>
        </div>
        <div className={css.content}>
          <img src={goodsInputBg} className={css.bg} alt=""/>
          <div className={css.box}>
            {
              ['name', 'phone', 'address'].map((item, index) => {
                const props = {
                  className: classnames(css.input, css[`input${index}`]),
                  key: index,
                  value: this.state[item],
                  onChange: this.update.bind(this, item),
                };
                return <input {...props}/>;
              })
            }
            <img className={css.submit} src={submitSrc} onClick={this.submit.bind(this)} alt=""/>
          </div>
        </div>
      </div>
    );
  }
}
